<template name="recommend">
	<view class="recommend">
		<navAre :navList="navList" :current="current" @navChange="navChange"></navAre>
		<scroll-view scroll-x="true" class="goodsAre" v-if="isGoods">
			<block v-for="(item,index) in goodsList" :key="index">
				<view class="goodsItemAre" v-bind:id="item.id" @click="goodsClick">
					<view class="block">
						<image :src="item.head_img"></image>
					</view>
					<text class="block fontHide" style="margin: 10rpx 0;">{{item.product_name}}</text>
					<text class="block price">￥{{item.price}}</text>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import util from '../common/util.js'
	import navAre from '@/components/navAre.vue'
	export default {
		name: "recommend",
		components:{navAre},
		data(){
			return {
				isGoods: false,
				navList: [],
				goodsList: [],
				current: 0
			}
		},
		created(){
			this.getClassData()
		},
		methods:{
			navChange(index,id){
				this.current = index
				this.getClassGoods(id)
			},
			getClassData(){
				//获取分类
				util.getAjax(this.global.apiUrl + '/get_one_product_class',(res)=>{
					console.log(res)
					if(res.data.length != 0){
						for(var i in res.data){
							res.data[i].name = res.data[i].class_name
						}
						this.navList = res.data
						this.getClassGoods(this.navList[0].id)
					}
				})
			},
			getClassGoods(id){
				util.getAjax(this.global.apiUrl + '/get_one_class_product_tj',(res)=>{
					console.log(res)
					if(res.data.length != 0){
						this.goodsList = res.data
						this.isGoods = true
					}else{
						this.isGoods = false
					}
				},{one_class_id: id})
			},
			goodsClick(e){
				var id = e.currentTarget.id
				this.$emit('goodsClick',id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.recommend{
		@include width;
		@include margin(40rpx 0);
		.goodsAre{
			width: calc(100% - 30rpx);
			height: 250rpx;
			white-space: nowrap;
			overflow: hidden;
			@include margin(30rpx auto 0);
			.goodsItemAre{
				@include widthHeight(210rpx,250rpx);
				@include text-align;
				@include font($fontSize - 2rpx);
				@include margin(0 15rpx);
				display: inline-block;
				position: relative;
				box-sizing: border-box;
				image{
					@include widthHeight(150rpx);
				}
				.block{
					display: block;
				}
			}
		}
	}
</style>
